{% extends "base.html" %}
{% comment 'header' %}
# This file is part of opentaps Smart Energy Applications Suite (SEAS).

# opentaps Smart Energy Applications Suite (SEAS) is free software:
# you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# opentaps Smart Energy Applications Suite (SEAS) is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU Lesser General Public License for more details.

# You should have received a copy of the GNU Lesser General Public License
# along with opentaps Smart Energy Applications Suite (SEAS).
# If not, see <https://www.gnu.org/licenses/>. {% endcomment %} {% load static %} {% block title %}Meter:
  {{ object.meter_id }}{% endblock %} {% block content %} <div class="container card mb-3">

  {% include "core/_breadcrumbs.html" %}

  <div class="p-3">
    <div>
      {% if object.description %}
      <h2 class="d-inline">Meter {{ object.description }} <span style="font-size: 1rem;">(id:
          {{ object.meter_id }})</span>
      </h2>
      {% else %}
      <h2 class="d-inline">
        <div class="d-inline row m-0">
          <div class="d-inline">Meter {{ object.meter_id }}</div>
          {% if newmeter %}
          <div class="text-right flex-grow-1 d-inline">
            <a class="btn btn-primary" href="{% url 'core:utilityapi_meters_import' site_id %}"><i
                class="fa fa-plus"></i> Add from UtilityAPI</a>
          </div>
          {% endif %}
        </div>
      </h2>
      {% endif %}
      {% block add_button %}
      <div class="float-right d-inline">
        <a href="{% url 'core:meter_create' object.site_id %}" class="btn btn-primary" role="button"><i
            class="fa fa-plus"></i> Add Meter</a>
        <a href="{% url 'core:meter_edit' object.meter_id %}" class="btn btn-primary" role="button"><i
            class="fa fa-edit mr-2"></i> Edit</a>
        <a href="{% url 'core:meter_deactivate' object.meter_id %}" class="btn btn-danger" role="button"><i
            class="fa fa-trash mr-2"></i> Deactivate</a>
      </div>
      {% endblock add_button %}
    </div>
    <div class="m-0 mb-2 pt-3">
      {% if meter.attributes.utilityapi_meter_uid %}
      <div class="row m-0 mb-2 mr-auto" id="utilityapi_meter_bill">
        <div>
          <b>Meter Utility API Id: </b>{{ meter.attributes.utilityapi_meter_uid }}
          <div class="alert alert-danger mt-3" role="alert" v-if="errors.error">${ errors.error }
            <button type="button" class="close" v-on:click="close_alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
          </div>
          <div class="alert alert-success mt-3" role="alert" v-if="success">${ success }
            <button type="button" class="close" v-on:click="close_alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
          </div>
        </div>
        <div class="text-right flex-grow-1">
          <b-spinner v-if="loading" variant="secondary"></b-spinner>
          <button v-if="!loading" v-on:click="get_bills" class="btn btn-primary btn-sm ml-4 mr-2"><i
              class="fas fa-cloud-download-alt"></i> Get Bills</button>
        </div>
      </div>
      {% endif %}
      <div style="margin-left: auto;">
        <b>Meter Rate Plan:</b>
        {% if not rate_plan_history %}
        <a href="{% url 'core:meter_rate_plan_history' object.meter_id %}">&nbsp &nbsp N/A &nbsp</a>
        {% else %}
        <a href="{% url 'core:meter_rate_plan_history_detail' rate_plan_history.rate_plan_history_id %}">
          {{ rate_plan_history.description }}</a>
        {% endif %}
        <a class="btn btn-primary btn-sm ml-4 mr-2" href="{% url 'core:meter_rate_plan_history' object.meter_id %}">See
          History</a>
      </div>
      <div style="margin-left: 1%; padding-top: 2%;" class="d-flex pl-2">
        {% if object.utility %}
        <p style="font-size: 0.8rem; width: 50%;"><b>{{ object.utility.utility_name }}
            ({{ object.utility_id }}){% if object.account_number %}<br /> Account {{ object.account_number }}</b></p>
        {% endif %}
        {% endif %}
        <p style="font-size: 0.8rem;">
          <b>Weather Station:</b>
          {% if not object.weather_station %}
          n/a
          {% else %}
          <a href="{{ object.weather_station.get_absolute_url }}">{{ object.weather_station }}</a>
          {% endif %}
        </p>
      </div>
    </div>
  </div>
  <div class="text-right flex-grow-1">

  </div>
  <div class="card-body" style="display: flex; flex-direction: row; justify-content: flex-start; padding: 0 4%; padding-bottom: 1%; margin-left: -3%">
    <br />
    {% block inner_content %}
    <p>
      {% include "core/_meter_history_chart.html" with meter_id=object.meter_id is_solaredge=is_solaredge latest_meter_date=latest_meter_date %}
    </p>

    {% if has_equipments %}
    <p><b>Equipment{% if equipments|length > 1 %}s{% endif %}:</b> {% for e in equipments %} <a
        href="{{ e.get_absolute_url }}">{{ e }}</a> {% endfor %}
      {% endif %}

      {% if has_weather_data %}
      <p>
        {% include "core/_weather_history_chart.html" with weather_station_id=object.weather_station_id site=object.site %}
      </p>
      {% endif %}
      {% endblock inner_content %}
  </div>
  </div>
  </div>

  {% block after_content %}
  {% if object and object.meter_id %}

  {% if emissions_data or emissions_data_error %}
  <div class="card mb-3">
    <div class="card-body">
      <h3>
        <div class="row m-0">
          <div class="">
            Emissions
          </div>
          <div class="text-right flex-grow-1">
            <a class="btn btn-primary" href="{% url 'core:emissions_create_emissions' object.meter_id %}"><i
                class="fa fa-plus"></i> Record Emissions</a>
          </div>
        </div>
      </h3>
      <div class="row m-0 mb-2">
        {% if emissions_data %}
        <table class="table">
          <thead>
            <tr>
              <th scope="col">From Date</th>
              <th scope="col">Thru Date</th>
              <th scope="col" align="right">Emissions</th>
              <th scope="col" align="right">Total Energy Used</th>
              <th scope="col" align="right">Renewable Energy</th>
              <th scope="col" align="right">Non-Renewable Energy</th>
              <th scope="col" align="right">Factor Source</th>
              <th scope="col" align="right">Document</th>
            </tr>
          </thead>
          <tbody>
            {% for emissions in emissions_data %}
            <tr>
              <td>{{ emissions.fromDate }}</td>
              <td>{{ emissions.thruDate }}</td>
              <td align="right">{{ emissions.emissionsAmount|floatformat:3 }} {{ emissions.emissionsUom }}</td>
              <td align="right">{{ emissions.renewableEnergyUseAmount|floatformat:0|add:emissions.nonrenewableEnergyUseAmount|floatformat:0 }} {{ emissions.energyUseUom }}</td>
              <td align="right">{{ emissions.renewableEnergyUseAmount|floatformat:0 }} {{ emissions.energyUseUom }}</td>
              <td align="right">{{ emissions.nonrenewableEnergyUseAmount|floatformat:0 }} {{ emissions.energyUseUom }}</td>
              <td align="right">{{ emissions.factorSource }}</td>
              {% if emissions.url|length > 0 %}
              <td align="right"><a href="{{ emissions.url }}">View</a></td>
              {% else %}
              <td align="right">N/A</td>
              {% endif %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% endif %}
        {% if emissions_data_error %}
        <div class="alert alert-danger flex-grow-1">{{ emissions_data_error }}</div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endif %}

  <div class="card mb-3">
    <div class="card-body">
      <h3>
        <div class="row m-0">
          <div class="">
            Models
          </div>
          <div class="text-right flex-grow-1">
            <a class="btn btn-primary" href="{% url 'core:meter_model_create' object.meter_id %}"><i
                class="fa fa-plus"></i> Build a Model</a>
          </div>
        </div>
      </h3>
      <div class="header-top">
        {% load qs_order_by from core_tags %}
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Model</th>
              <th scope="col">Range</th>
              <th scope="col">Created</th>
            </tr>
          </thead>
          <tbody>
            {% for model in object.baselinemodel_set.all|qs_order_by:'-id' %}
            <tr>
              <th scope="row"><a href="{% url 'core:meter_model_detail' model.meter_id model.id %}">{{ model.id }}</a>
              </th>
              <td><a
                  href="{% url 'core:meter_model_detail' model.meter_id model.id %}">{{ model.description|default:model.model_class }}</a>
              </td>
              <td>{{ model.from_datetime|date:'m/d/Y' }} to {{ model.thru_datetime|date:'m/d/Y' }}</td>
              <td><span class="text-muted text-right">{{ model.created_datetime|date:'m/d/Y' }}</span></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {% url 'core:meter_financial_values_table' object.meter_id as meter_financial_values_url %}
  {% include "core/_ajax_table.html" with title="Financial Values" name="financial_values" table_url=meter_financial_values_url hide_empty=True %}
  {% endif %}
  {% endblock after_content %}

  {% if object.transactions.exists %}
  {% url 'core:meter_transactions_table' object.meter_id as meter_transactions_url %}
  {% include "core/_ajax_table.html" with title="Transactions" name="transactions" table_url=meter_transactions_url %}
  {% endif %}

  </div>
  <script>
    (function () {
    {% load js_csrf_token from core_tags %}
    const CSRF_TOKEN = '{% js_csrf_token %}';

      new Vue({
        delimiters: ['${', '}'],
        name: 'utilityapi_meter_bill',
        el: '#utilityapi_meter_bill',
        data() {
          return {
            csrfmiddlewaretoken: CSRF_TOKEN,
            loading: false,
            success: false,
            errors: {
              'error': null
            },
          }
        },
        mounted() {},
        methods: {
          close_alert() {
            this.success = false;
            this.errors = {
              'error': null
            };
          },
          get_bills() {
            this.errors = {
              'error': null
            };
            url = dutils.urls.resolve('utilityapi_meter_bills_import', {
              meter_id: '{{object.meter_id}}'
            });
            console.log('get_bills for {{object.meter_id}} ...')
            this.loading = true;
            this.success = false;
            axios.post(url, {}, {
                headers: {
                  'X-CSRFToken': this.csrfmiddlewaretoken
                }
              })
              .then(x => x.data)
              .then(x => {
                if (x.success) {
                  console.log('get_bills, result = ', x);
                  this.success = x.message;
                  eventHub.$emit('financial_values_table_refresh')
                }
                this.loading = false;
              })
              .catch(err => {
                e = getResponseError(err);
                console.error(e, err);
                this.errors = e;
                this.loading = false;
              });
          }
        }
      });
    })();

  </script>
  {% endblock content %}
